<template>
    <a-layout>
        <a-layout-sider>
            <a-anchor class="side-nav" :affix="false" @click="handleClick">
                <a-anchor-link v-for="(item,key) in parts" :key="key" :href="item.keys[0]" :title="item.name" />
            </a-anchor>
        </a-layout-sider>
        <a-layout-content>
            <h1 class="h1">var模型结果</h1>
            <div class="result-area" id="modelInfo">
                <divider-title name="模型说明" />
                <div class="ant-table-wrapper" v-if="modelInfo">
                    <div class="ant-spin-nested-loading">
                        <div class="ant-spin-container">
                            <div class="ant-table ant-table-scroll-position-left ant-table-middle">
                                <div class="ant-table-content"><!---->
                                    <div class="ant-table-body">
                                        <table class="">
                                            <thead class="ant-table-thead">
                                                <tr>
                                                    <th :key="key" :style="{width:key===0?'100px':'auto'}" v-for="(item,key) in modelInfo[0]"><span class="ant-table-header-column"><div><span class="ant-table-column-title" v-html="item.val"></span></div></span></th>
                                                </tr>
                                            </thead>
                                            <tbody class="ant-table-tbody">
                                                <tr class="ant-table-row ant-table-row-level-0" data-row-key="0" v-for="(item,key) in modelInfo" :key="key" v-show="key>0">
                                                    <td v-for="(i,k) in item" :key="k">{{i.val}}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div v-if="modelData">
                    <div class="ant-table-wrapper" v-for="(value,index) in modelData" :key="index">
                        <h2 class="h2">{{value.val}}</h2>
                        <div class="ant-spin-nested-loading">
                            <div class="ant-spin-container">
                                <div class="ant-table ant-table-scroll-position-left ant-table-middle">
                                    <div class="ant-table-content">
                                        <h3 class="h3">{{value.modelEquation.val}}</h3>
                                        <div class="ant-table-body">
                                            <table class="">
                                                <tbody class="ant-table-tbody">
                                                    <tr class="ant-table-row ant-table-row-level-0" data-row-key="0" v-for="(item,key) in value.modelEquation.data" :key="key">
                                                        <td v-for="(i,k) in item" :key="k">{{i.val}}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>

                                    <div class="ant-table-content">
                                        <h3 class="h3">{{value.modelEvaluationData.val}}</h3>
                                        <div class="ant-table-body">
                                            <table class="">
                                                <tbody class="ant-table-tbody">
                                                    <tr class="ant-table-row ant-table-row-level-0" data-row-key="0" v-for="(item,key) in value.modelEvaluationData.data" :key="key">
                                                        <td v-for="(i,k) in item" :key="k" style="width:100px">{{i.val}}</td>
                                                        <td></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>

                                    <div class="ant-table-content">
                                        <h3 class="h3">{{value.modelTestData.val}}</h3>
                                        <div class="ant-table-body">
                                            <table class="">
                                                <tbody class="ant-table-tbody">
                                                    <tr class="ant-table-row ant-table-row-level-0" data-row-key="0" v-for="(item,key) in value.modelTestData.data" :key="key">
                                                        <td v-for="(i,k) in item" :key="k" style="width:100px">{{i.val}}</td>
                                                        <td></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>

            <div class="result-area" id="modelSelection">
                <divider-title name="准则信息" />

                <div class="ant-table-wrapper" v-for="(value,index) in informationCriteria" :key="index">
                    <h2 class="h2">{{value.val}}</h2>
                    <div class="ant-spin-nested-loading">
                        <div class="ant-spin-container">
                            <div class="ant-table ant-table-scroll-position-left ant-table-middle">
                                <div class="ant-table-content">
                                    <h3 class="h3">{{value.modelSelection.val}}</h3>
                                    <div class="ant-table-body">
                                        <table class="">
                                            <tbody class="ant-table-tbody">
                                                <tr class="ant-table-row ant-table-row-level-0" data-row-key="0" v-for="(item,key) in value.modelSelection.data" :key="key">
                                                    <td style="width:100px" v-for="(i,k) in item" :key="k">{{i.val}}</td>
                                                    <td></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="ant-table-content">
                                    <h3 class="h3">{{value.modelCriteria.val}}</h3>
                                    <div class="ant-table-body">
                                        <table class="">
                                            <tbody class="ant-table-tbody">
                                                <tr class="ant-table-row ant-table-row-level-0" data-row-key="0" v-for="(item,key) in value.modelCriteria.data" :key="key">
                                                    <td v-for="(i,k) in item" :key="k" style="width:100px">{{i.val}}</td>
                                                    <td></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="result-area" id="predictData">
                <divider-title name="预测结果" />

                <div class="ant-table-wrapper" v-for="(value,index) in predictData" :key="index">
                    <div class="ant-spin-nested-loading">
                        <div class="ant-spin-container">
                            <div class="ant-table ant-table-scroll-position-left ant-table-middle">
                                <div class="ant-table-content">
                                    <h3 class="h3">{{value.val}}</h3>
                                    <div class="ant-table-body">
                                        <table class="">
                                            <tbody class="ant-table-tbody">
                                                <tr class="ant-table-row ant-table-row-level-0" data-row-key="0" v-for="(item,key) in value.data" :key="key">
                                                    <td style="width:100px" v-for="(i,k) in item" :key="k">{{i.val}}</td>
                                                    <td></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="ant-table-content">
                                    <h3 class="h3">{{value.val}}</h3>
                                    <div class="ant-table-body">
                                        <table class="">
                                            <tbody class="ant-table-tbody">
                                                <tr class="ant-table-row ant-table-row-level-0" data-row-key="0" v-for="(item,key) in value.data" :key="key">
                                                    <td v-for="(i,k) in item" :key="k" style="width:100px">{{i.val}}</td>
                                                    <td></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="result-area" id="unitRootModel">
                <divider-title name="单位根" />

                <div class="ant-table-wrapper" :key="index">
                    <div class="ant-spin-nested-loading">
                        <div class="ant-spin-container">
                            <div class="ant-table ant-table-scroll-position-left ant-table-middle">
                                <div class="ant-table-content">
                                    <h3 class="h3">{{unitRootModel.val}}</h3>
                                    <div class="ant-table-body">
                                        <table class="">
                                            <tbody class="ant-table-tbody">
                                                <tr class="ant-table-row ant-table-row-level-0" data-row-key="0">
                                                    <td style="width:100px" v-for="(i,k) in unitRootModel.data" :key="k">{{i.val}}</td>
                                                    <td></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                

                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            
        </a-layout-content>
    </a-layout>
</template>

<script>
import { getSessionItem } from '../../until/tools'
import DividerTitle from './components/DividerTitle.vue';
export default {
    components:{DividerTitle},
    computed:{
        result() {
            let data = getSessionItem('analysis_varModel');
            return data.analysis_varModel;
        },
        parts() {
            let arr = [
                {
                    name:'模型说明',
                    keys:['modelInfo'],
                },
                {
                    name:'信息准则',
                    keys:['modelSelection'],
                },
                {
                    name:'预测结果',
                    keys:['predictData'],
                },

                {
                    name:'单位根',
                    keys:['unitRootModel'],
                },
            ]
            return arr;
        },
        modelInfo() {
            if(this.result) {
                return this.result.infoData.data;
            } else {
                return null;
            }
        },
        modelData() {
            if(this.result) {
                return this.result.modelData;
            } else {
                return null;
            }
        },
        informationCriteria() {
            if(this.result) {
                return this.result.informationCriteria;
            } else {
                return null;
            }
        },
        predictData() {
            if(this.result) {
                return this.result.predictData;
            } else {
                return null;
            }
        },
        unitRootModel() {
            if(this.result) {
                return this.result.unitRootModel;
            } else {
                return null;
            }
        }

        
    },
    methods:{
        handleClick(e,link) {
            e.preventDefault();
            var srcolls = document.getElementById(link.href);
            srcolls.scrollIntoView({block: 'start', behavior: 'smooth'});
        },
    }
}
</script>